<template>
  <div class="register">
    <div class="register-box" v-if="!showMsg">
      <div class="title">注册</div>
      <div class="from">
        <el-form
          ref="ruleForm"
          :rules="rules"
          :model="ruleForm"
          label-width="25%"
          autocomplete="off"
          hide-required-asterisk
        >
          <el-form-item
            label="姓名"
            prop="userName"
            class="reg"
            style="height: 25px"
          >
            <el-input v-model="ruleForm.userName" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email" class="reg" style="height: 25px">
            <el-input
              v-model="ruleForm.email"
              style="width: 80%"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="手机号"
            prop="phone"
            class="reg"
            style="height: 25px"
          >
            <el-input
              v-model="ruleForm.phone"
              maxlength="11"
              style="width: 80%"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="密码"
            prop="password"
            class="reg"
            style="height: 25px"
          >
            <el-input
              auto-complete="new-password"
              :type="passwordType"
              v-model="ruleForm.password"
              style="width: 80%"
            ></el-input>
            <div class="openimage" @click="isOpen">
              <img
                class=""
                :src="passcheck.hide"
                v-show="isicon == true"
                alt=""
              />
              <img
                class="open"
                :src="passcheck.open"
                v-show="isicon == false"
                alt=""
              />
            </div>
          </el-form-item>
          <el-form-item
            label="验证码"
            prop="code"
            class="regs"
            style="height: 25px"
          >
            <el-input v-model="ruleForm.code" style="width: 45%"></el-input>
            <el-button
              class="codebtn btn"
              :disabled="isDisabled"
              type="primary"
              @click="sendCode"
              >{{ buttonText }}</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="check">
        <el-checkbox v-model="checked">我同意《注册协议》</el-checkbox>
      </div>
      <div class="error-box">
        <div class="error" v-show="errmessage.err">
          <i class="el-icon-warning"></i>
          <span>{{ errmessage.message }}</span>
        </div>
      </div>
      <div class="registernow-box">
        <el-button class="registernow" @click="getRegister()" type="primary"
          >立即注册</el-button
        >
      </div>
      <div class="register-bottom">
        <span>已有账号？</span>
        <span class="landing" @click="goLogin()">直接登录</span>
      </div>
    </div>
    <Registermsg v-else></Registermsg>
  </div>
</template>
<script>
import Registermsg from "./components/registermsg.vue";
import { mapGetters, mapActions } from "vuex";
export default {
  components: {
    Registermsg,
  },
  data() {
    const validateUserPhone = (rule, value, callback) => {
      if (!/^1[3|4|5|7|8|9][0-9]\d{8}$/.test(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    const validateUserEmail = (rule, value, callback) => {
      if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
        callback(new Error("请输入正确的邮箱"));
      } else {
        callback();
      }
    };
    return {
      disabled: 1,
      buttonText: "获取验证码",
      isDisabled: false, // 是否禁止点击发送验证码按钮
      flag: true,
      isicon: true,
      checked: true,
      passwordType: "password",
      showMsg: false,
      ruleForm: {
        email: "",
        phone: "",
        userName: "",
        password: "",
        code: "",
      },
      errmessage: {
        err: false,
        message: "手机号错误，请重输入",
      },
      passcheck: {
        hide: require("@/assets/images/login/hide.png"),
        open: require("@/assets/images/login/open.png"),
      },
      rules: {
        userName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            required: true,
            trigger: ["blur", "change"],
            validator: validateUserPhone,
          },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            required: true,
            trigger: ["blur", "change"],
            validator: validateUserEmail,
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      timer: null,
    };
  },
  mounted() {},
  methods: {
    ...mapActions(["sendSms", "register"]),
    isOpen() {
      this.isicon = !this.isicon;
      if (this.isicon == true) {
        this.passwordType = "password";
      } else {
        this.passwordType = "text";
      }
    },
    getRegister() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let data = {
            phone: this.ruleForm.phone,
            password: this.ruleForm.password,
            name: this.ruleForm.userName,
            phone_code: this.ruleForm.code,
            email: this.ruleForm.email,
          };
          this.register(data).then((res) => {
            this.showMsg = true;
            this.$refs.ruleForm.resetFields();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 发送验证码
    sendCode() {
      this.$refs.ruleForm.validateField("phone", (phoneError) => {
        if (!phoneError) {
          this.sendSms({ mobile: this.ruleForm.phone ,type:1}).then((res) => {
            this.changeBtnText();
          });
        }
      });
    },
    changeBtnText() {
      let time = 60;
      this.isDisabled = true;
      this.buttonText = "已发送（" + time + " s）";
      let timer = setInterval(() => {
        time--;
        this.buttonText = "已发送（" + time + " s）";
        if (time === 0) {
          clearInterval(timer);
          this.buttonText = "重新获取";
          this.isDisabled = false;
        }
      }, 1000);
    },
    
    goLogin() {
      this.$router.push({
        name: "login",
      });
    },
  },
};
</script>

<style scoped>
.register {
  height: 100vh;
  background: #fafafa;
  padding: 15px;
  width: 92%;
}
.register-box {
  background: #ffffff;
  box-shadow: 0px 2.5px 6px 0px rgba(3, 3, 3, 0.1);
  padding-bottom: 20px;
}
.title {
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
  text-align: center;
  padding-top: 25px;
}
.el-input /deep/ .el-input__inner {
  border-left: none;
  border-top: none;
  border-right: none;
  border-radius: 0;
  height: 25px;
  line-height: 25px;
}
.el-form-item /deep/ .el-form-item__content {
  height: 25px;
  line-height: 25px;
}
.el-form-item {
  margin-bottom: 17px;
}
.el-form-item /deep/ .el-form-item__label {
  height: 25px;
  line-height: 25px;
}
.el-input {
  height: 25px;
}
.regs {
  position: relative;
}
.openimage {
  position: absolute;
  top: -18px;
  right: 20%;
}
.open {
  width: 60px;
  height: 60px;
}
.btn {
  width: 30%;
  height: 25px;
  font-size: 9px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  text-align: center;
  line-height: 25px;
  position: absolute;
  right: 20%;
  top: 0;
  -webkit-text-size-adjust: none;
}
.el-button {
  padding: 0;
}
.codebtn {
  background: #f1f7ff;
  color: #0e93e4;
  height: 25px;
}
.check {
  font-size: 9px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
  margin-top: 2px;
}
.check,
.registernow-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-checkbox /deep/ .el-checkbox__label {
  font-size: 9px;
}
.el-checkbox /deep/ .el-checkbox__inner {
  width: 10px;
  height: 10px;
}
.el-checkbox /deep/ .el-checkbox__inner::after {
  height: 4px;
  left: 2px;
}
.registernow {
  margin: 0px 27px;
  width: 100%;
  height: 37px;
  background: linear-gradient(90deg, #30a6ff, #0091ff);
  box-shadow: 0px 7px 27px 0px rgba(50, 129, 255, 0.51);
  border-radius: 2px;
  margin-top: 10px;
}
.error-box {
  height: 24px;
  margin-top: 10px;
}
.error {
  margin: 0px 27px;
  height: 22px;
  background: #feefef;
  border: 0.5px dashed #ffd5d5;
  font-size: 9px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ff1e1e;
  line-height: 22px;
  margin-top: 10px;
}
.error i {
  font-size: 14px;
  margin: 0 7px;
}     
.register-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  font-size: 9px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
  letter-spacing: 1px;
}
.landing {
  font-size: 9px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #0e93e4;
  cursor: pointer;
}
</style>